<script lang="tsx">
import { defineComponent } from "vue";
import draggable from "vuedraggable";
import draggableItem from "./draggableItem.vue";
import { ElForm, ElRow } from "element-plus";
import { useFormConfigList } from "../observer";
import { FormConfigItem } from "../type";

export default defineComponent({
  name: "Center",
  components: {
    draggable,
    draggableItem,
  },
  setup() {
    const list = useFormConfigList();
    function createFromItem(config: FormConfigItem) {
      return (
        <draggableItem
          config={config}
          onChangeModel={(val: any) => {
            config.modelValue = val
          }}
        ></draggableItem>
      );
    }
    return () => {
      return (
        <div class="center">
          <ElForm>
            <ElRow>
              <draggable
                class="dragArea"
                list={list.value}
                group="people"
                item-key="placeholder"
                animation={340}
                v-slots={{
                  item: ({ element }: any) => {
                    return createFromItem(element);
                  },
                }}
              ></draggable>
            </ElRow>
          </ElForm>
        </div>
      );
    };
  },
});
</script>
<style lang="less" scoped>
.center {
  flex: 1;
}

.dragArea {
  min-height: 50px;
  width: 100%;
  outline: 1px dashed;
}
</style>
